<template>
<div>
  <el-button class="exportButton" @click="exportData" type="success" icon="el-icon-download">
    导出数据
  </el-button>
  <el-table :data="data.slice((currentPage-1)*size,currentPage*size)"
            :header-cell-style="{textAlign:'center'}"
            :cell-style="{textAlign:'center'}"
            style="width:100%"
            class="table"
            max-height="700"
            size="medium"
            fit
            border
            highlight-current-row>
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="项目名称">
            <span>{{ props.row.entryname }}</span>
          </el-form-item>
          <el-form-item label="工程名称">
            <span>{{ props.row.projectname }}</span>
          </el-form-item>
          <el-form-item label="检查内容">
            <span>{{ props.row.contents }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column prop="entryname" label="项目名称" width="120" />
    <el-table-column prop="projectname" sortable label="工程名称" width="120" />
    <el-table-column prop="starttime" sortable label="工程开始时间" width="150" />
    <el-table-column prop="endtime" sortable label="工程结束时间" width="150" />
    <el-table-column prop="quantities" sortable label="工程量" width="120" />
    <el-table-column prop="createtime" label="创建时间" width="150" />
    <el-table-column prop="updatetime" label="更新时间" width="150" />
    <el-table-column prop="contents" label="检查内容" width="150" />
    <el-table-column  label="是否合格" width="150">
      <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.isqualified=='合格'">合格</el-tag>
          <el-tag type="danger" v-if="scope.row.isqualified=='不合格'">不合格</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="image" label="图片" width="150">
        <template slot-scope="scope">
          <el-image @click="srcList.push(scope.row.image)" :preview-src-list="srcList" :src="scope.row.image" width="150" height="150"/>
        </template>
    </el-table-column>
    <el-table-column  label="操作" width="250">
      <template #default="scope">
        <el-button type="primary" size="small" @click.prevent="showRow(scope.row)">查看</el-button>
        <el-button type="success" size="small" @click.prevent="updateRow(scope.row)">编辑</el-button>
        <el-button type="danger" size="small" @click.prevent="deleteRow(scope.row)">移除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-pagination
    background
    @current-change="currentChange"
    @size-change="sizeChange"
    :total="total"
    style="padding: 30px 0; text-align: center;"
    layout="total, sizes, prev, pager, next, jumper"/>

  <system-dialog
    :title="update.title"
    :height="update.height"
    :width="update.width"
    :visible="update.visible"
    @onClose="onAssignClose"
    @onConfirm="onAssignConfirm(form)"
  >
      <!-- 数据列表 -->
    <div slot="content">
      <el-form ref="form" :model="form" label-width="100px" style="margin-top: 20px">
        <el-form-item label="项目名称" style="width: 450px">
          <el-input v-model="form.entryname"></el-input>
        </el-form-item>
        <el-form-item label="工程名称" style="width: 450px">
          <el-input v-model="form.projectname"></el-input>
        </el-form-item>
        <el-form-item label="施工开始时间">
          <el-col :span="12">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.starttime" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="施工结束时间">
          <el-col :span="12">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.endtime" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="是否合格">
          <el-radio-group v-model="form.isqualified">
            <el-radio label="合格"></el-radio>
            <el-radio label="不合格"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工程量" style="width: 320px">
          <el-input v-model="form.quantities"></el-input>
        </el-form-item>
        <el-form-item label="工程照片">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            action="http://localhost:9999/api/oss/file/uploadImg?module=AHUT"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :data="uploadHeader"
          >
            <img v-if="form.image" :src="form.image">
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
          </el-upload>
        </el-form-item>
        <el-dialog :visible.sync="dialogVisible"/>
        <el-form-item label="检查内容" style="width: 450px">
          <el-input type="textarea" v-model="form.contents"></el-input>
        </el-form-item>
      </el-form>
    </div>


  </system-dialog>


</div>


</template>

<script>
import loadApi from '@/api/img';
import userApi from '@/api/user'
//导入对话框组件
import SystemDialog from '@/components/system/SystemDialog.vue'
import download from '@/api/download'
import { getToken } from '@/utils/auth'
export default {
  name: 'table',
  components:{
    SystemDialog
  },
  data(){
    return{
      //上传需要携带的数据
      uploadHeader:{"token":getToken()},
      update:{
        title:"",
        height:'',
        width:'',
        visible:false
      },
      srcList: [
      ],
      total:50,
      currentPage:1,
      size:10,
      data:{
          id: '',
          entryname: '',
          projectname: '',
          createtime: '',
          updatetime: '',
          starttime: '',
          endtime: '',
          contents: '',
          isqualified: '',
          image:'',
          quantities:''
        },
      form:{
        id: '',
        entryname: '',
        projectname: '',
        createtime: '',
        updatetime: '',
        starttime: '',
        endtime: '',
        contents: '',
        isqualified: '',
        image:'',
        quantities:''
      },
    }
  },
  mounted() {
    this.list()
  },
  methods:{
    async exportData(){
      await download.down()
    },
    showRow(row){
      //回到列表页面 路由跳转
      this.$router.push({path:'/img/showId?id='+row.id})
    },
    formatter(row, column) {
      return row.address;
    },
    /*** 上传校验 * @param file * @returns {boolean} */
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'||'image/png'
      const isLt2M = file.size / 10240 / 10240 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 20MB!')
      }
      return isJPG && isLt2M
    },
    /**
     * * 上传成功回调
     * * @param res *
     * @param file
     * */
    handleAvatarSuccess(res, file) {
      console.log(res)
      this.form.image = res.data
      // 强制重新渲染
      this.$forceUpdate()
    },
    async onSubmit(form){
      let res = await loadApi.upload(form)
      if (res){
        this.$message.success(res.message)
      }else {
        this.$message.error(res.message)
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    async onAssignConfirm(form){
      let res = await loadApi.update(form)
      if (res){
        this.update.visible=false
        this.$message.success(res.message)
        this.list()
      }else{
        this.$message.error(res.message)
      }
    },
    onAssignClose(){
      this.update.visible=false
    },
    async updateRow(row){
      //把当前编辑的数据复制到表单数据域，供回显使用
      // let res = await loadApi.selectId(row.id)
      // console.log(res.data)
      // this.form = res.data
      //把当前编辑的数据复制到表单数据域，供回显使用
      this.$objCopy(row, this.form)
      this.update.visible=true
      this.update.width=500
      this.update.height=700
      this.update.title="编辑"
    },
    async deleteRow(row){
      let confirm = await this.$myconfirm('确定要删除该数据吗?')
      if (confirm) {
        //封装条件
        let params = { id: row.id }
        console.log(params)
        let res = await loadApi.deletebyid(params)
        if (res){
          this.$message.success(res.message)
          this.list()
        }else {
          this.$message.error(res.message)
        }

      }
    },
    sizeChange(size){
      this.size=size;
      this.show()
    },
    currentChange(currentPage){
      this.currentPage=currentPage;
      this.show()
    },
    async list(){
      let res = await loadApi.listAll()
      this.total = res.data.length
      this.data=res.data
    }
  }
}
</script>

<style lang="scss">
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 25%;
}

.demonstration{
  width: 250px;
  height: 250px;
  display: block;
}
.table{
  margin-top: 20px;
  margin-left: 50px;
}
//用户头像
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar-uploader img {
  width: 100px;
  height: 100px;
  display: block;
}
.exportButton{
  margin-top: 50px;
  margin-left: 50px;
}
</style>
